<template>
	<view class="process-frame">
		<view v-if="loading" class="pf-box">
			<loading></loading>
		</view>
		<view v-else-if="error" class="pf-box">
			<image class="pf-img" :src="errorImage" mode="aspectFit"></image>
			<view class="pf-text">{{ errorMsg }}</view>
			<view class="pf-btn" v-if="errorBtn">
				<u-button
					type="primary" 
					shape="circle" 
					:customStyle="{'height': '80rpx', 'font-size': '28rpx'}" 
					:disabled="errorBtnDisabled" 
					:loading="errorBtnLoading" 
					@click="$emit('errorclick')" 
				>{{ errorBtnMsg }}</u-button>
			</view>
		</view>
		<view v-else-if="empty" class="pf-box">
			<image class="pf-img" src="https://qnoss.smarttirp.com/Fk39TC2QQCHOWxli_yL06bMAgTgt.png" mode="aspectFit"></image>
			<view class="pf-text">{{ emptyText }}</view>
			<slot name="empty-btn"></slot>
		</view>
		<view v-else>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 流程控制框架
	 */
	const errorTypeList = {
		notfound: 'https://qnoss.smarttirp.com/Ftk2oXt8hxpiOydIIzwb7I2BVeGw.png',
		network: 'https://qnoss.smarttirp.com/FrjNmomcPyzC6WXUlxtDcflRobG4.png',
	}
	export default {
		name: 'processFrame',
		props: {
			// 加载时
			loading: Boolean,
			
			// 失败时
			error: Boolean,
			errorMsg: String,
			errorType: {
				type: String,
				default: 'network',
			},
			errorBtn: {
				type: Boolean,
				default: true,
			},
			errorBtnMsg: {
				type: String,
				default: '点击重试'
			},
			errorBtnDisabled: Boolean,
			errorBtnLoading: Boolean,
			
			// 为空时
			empty: Boolean,
			emptyText: {
				type: String,
				default: '暂无数据'
			},
		},
		computed: {
			errorImage() {
				return errorTypeList[this.errorType] || errorTypeList.network
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process-frame {
		.pf-box {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.pf-img {
				width: 376rpx;
				height: 314rpx;
			}
			.pf-text {
				font-size: 28rpx;
				color: $u-content-color;
				word-break: break-all;
			}
			.pf-btn {
				margin-top: 40rpx;
				width: 200rpx;
			}
		}
	}
</style>
